RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / admin / resources / views / School / Users /
Filename : index.blade.php
back
@extends('Admin.layout.main')
@section('content')
@section('pagestylesheet')
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/data-tables/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/data-tables/css/select.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/pages/data-tables.css') }}">
    <style type="text/css">
        #main .section-data-tables .dataTables_wrapper .dataTables_filter {
            display: block;
        }

        #main .section-data-tables .dataTables_wrapper .dataTables_filter label {
            display: inline-flex;
            font-size: 18px;
        }
        .dataTables_wrapper .dataTables_filter input {
            height: 1.5rem;
        }
        #main .section-data-tables .dataTables_wrapper .dataTables_length {
            display: block;
        }
        #main .section-data-tables .dataTables_wrapper select {
            display: block;
        }

        #main .section-data-tables .dataTables_wrapper .dataTables_length label {
            display: inline-flex;
            font-size: 15px;
        }

        select{
            width: 100%;
            height: 25px;
            padding: 0px 3px;
            font-size: 15px
        }

        [type='checkbox'] + span:not(.lever):before, [type='checkbox']:not(.filled-in) + span:not(.lever):after {
            width: 12px;
            height: 12px;
        }

        #loader {
            display: none; /* Initially hidden */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            text-align: center;
        }
        #loader .preloader-wrapper {
            width: 50px;
            height: 50px;
        }

    </style>
@stop

<!-- BEGIN: Page Main-->
<div id="main">
    <div class="row">
        <div class="col s12">
            <div class="container">
                <div class="section section-data-tables">
                    <div class="row">
                        <div class="col s12">
                            <div class="card">
                                <div class="card-content">
                                    <!-- You can include other actions here -->
                                    <div class="row">
                                        <!-- Title -->
                                        <div class="col l8 m12 s12 mt-2">
                                            <h4 class="card-title">Enrolled Students: {{$school->school_name}} [{{ $school->uuid }}]
                                            </h4>
                                        </div>
                                        <div class="col l4 m12 s12  mt-2">
                                            <div class="input-field col">
                                                <select id="bulk-action" class="browser-default">
                                                    <option value="" disabled selected>Choose Action</option>
                                                    <option value="Send Mail">Send Mail</option>
                                                    <option value="Add to Segment">Add to Segment</option>
                                                    <option value="Remove from Segment">Remove from Segment</option>
                                                </select>
                                            </div>
                                            <div class="input-field col m2">
                                                <button id="apply-action" class="btn waves-effect waves-light">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Table -->
                                    <div class="row">
                                        <div class="col l12 m12 s12 mt-2">
                                            <table id="preferredUsersTable" class="display">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center">
                                                            <label>
                                                            <input type="checkbox" id="select-all" class="select-all-users">
                                                            <span></span>
                                                            </label>
                                                        </th>
                                                        <th class="text-center">Profile Picture</th>
                                                        <th class="text-center">Full Name</th>
                                                        <th class="text-center">Email</th>
                                                        <th class="text-center">Mobile</th>
                                                        <th class="text-center">Segment Names</th>
                                                        <th class="text-center">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- DataTables will populate this -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="loader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <div class="preloader-wrapper big active">
            <div class="spinner-layer spinner-blue-only">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="gap-patch">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>
        <p style="margin-top: 20px; font-size: 18px; color: #3498db;">Loading...</p>
    </div>
</div>


<!-- Send Mail Modal -->
<div id="sendMailModal" class="modal">
    <div class="modal-content">
        <h5>Send Mail
            <a href="#!" class="modal-close waves-effect waves-red btn-flat" style="float: right;">X</a>
        </h5>
        <form id="sendMailForm">
            <div class="row">
                <div class="input-field col s12">
                    <textarea id="mailMessage" name="message" class="materialize-textarea" style="height: 150px" required></textarea>
                    <label for="mailMessage">Message</label>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <button type="submit" class="btn waves-effect waves-light">Send</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal for Segment Selection -->
<div id="addSegmentModal" class="modal">
    <div class="modal-content">
        <h5>Select segment to associate selected students with:
            <a href="#!" class="modal-close waves-effect waves-red btn-flat" style="float: right;">X</a>
        </h5>
        <form id="addToSegmentForm">
            <div class="row">
                <div class="col s12">
                    <div class="input-field">
                        <select id="addToSegmentSelect">
                            <option value="" disabled selected>Choose a segment</option>
                            @foreach($segments as $segment)
                                <option value="{{ $segment->id }}">{{ $segment->name }}  [{{$segment->id}}] </option>
                            @endforeach
                        </select>
                        {{-- <div class="input-field">
                            <div id="addToSegmentChips" class="chips chips-placeholder"></div>
                            <input type="hidden" name="selected_segments" id="addToSegmentSelect">
                        </div> --}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <button type="submit" class="btn waves-effect waves-light">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="addSegmentSummaryModal" class="modal">
    <div class="modal-content">
        <h5>Summary of Add Students to Segments:
            <a href="#!" class="modal-close waves-effect waves-red btn-flat" style="float: right;">X</a>
        </h5>
        <table class="highlight">
            <thead>
                <tr>
                    <th>Segment Name</th>
                    <th>Number of Students Added</th>
                </tr>
            </thead>
            <tbody id="addSegmentSummaryTableBody">
                <!-- Summary rows will be injected here -->
            </tbody>
        </table>
    </div>
</div>

<div id="removeSegmentModal" class="modal">
    <div class="modal-content">
        <h5>Select segment to remove selected students from:
            <a href="#!" class="modal-close waves-effect waves-red btn-flat" style="float: right;">X</a>
        </h5>
        <form id="removeFromSegmentForm">
            <div class="row">
                <div class="col s12">
                    <div class="input-field">
                        <select id="removeFromSegmentSelect" >
                            <option value="" disabled selected>Choose a segment</option>
                            @foreach($segments as $segment)
                                <option value="{{ $segment->id }}">{{ $segment->name }} [{{$segment->id}}] </option>
                            @endforeach
                        </select>
                        {{-- <div class="input-field">
                            <div id="removeFromSegmentChips" class="chips chips-placeholder"></div>
                            <input type="hidden" name="selected_segments" id="removeFromSegmentSelect">
                        </div> --}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col s12">
                    <button type="submit" class="btn waves-effect waves-light">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="removeSegmentSummaryModal" class="modal">
    <div class="modal-content">
        <h5>Summary of Remove Students from Segments:
            <a href="#!" class="modal-close waves-effect waves-red btn-flat" style="float: right;">X</a>
        </h5>
        <table class="highlight">
            <thead>
                <tr>
                    <th>Segment Name</th>
                    <th>Number of Students Removed</th>
                </tr>
            </thead>
            <tbody id="removeSegmentSummaryTableBody">
                <!-- Summary rows will be injected here -->
            </tbody>
        </table>
    </div>
</div>
<!-- END: Page Main-->
@endsection

@section('pagescript')
<script src="{{ asset('app-assets/vendors/data-tables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('app-assets/vendors/data-tables/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('app-assets/js/scripts/data-tables.js') }}"></script>

<script type="text/javascript">
let table;
    $(document).ready(function() {
        // let segmentOptions = {}; // Store { "Segment Name [ID]": null }

        // @foreach($segments as $segment)
        //     segmentKey = "{{ $segment->name }} [{{ $segment->id }}]"; // Unique key
        //     segmentOptions[segmentKey] = null; // Set value to null to prevent image
        // @endforeach

        // function initializeChips(selector, hiddenInput) {
        //     $(selector).chips({
        //         placeholder: 'Search and select segments',
        //         secondaryPlaceholder: 'More segments',
        //         autocompleteOptions: {
        //             data: segmentOptions, // No image will be shown
        //             limit: 5,
        //             minLength: 1
        //         },
        //         onChipAdd: function() {
        //             updateSegmentInput(selector, hiddenInput);
        //         },
        //         onChipDelete: function() {
        //             updateSegmentInput(selector, hiddenInput);
        //         }
        //     });
        // }

        // function updateSegmentInput(chipSelector, hiddenInput) {
        //     let instance = M.Chips.getInstance($(chipSelector));
        //     let selectedSegmentIds = instance.chipsData.map(chip => {
        //         let chipText = chip.tag;
        //         return chipText.match(/\[(\d+)\]$/)?.[1] || ''; // Extract ID from text
        //     });

        //     $(hiddenInput).val(selectedSegmentIds.join(',')); // Store IDs
        // }

        // initializeChips('#removeFromSegmentChips', '#removeFromSegmentSelect');
        // initializeChips('#addToSegmentChips', '#addToSegmentSelect');

        // Show loader when an AJAX request starts
        $(document).ajaxStart(function() {
            $('#loader').fadeIn();
        });

        // Hide loader when all AJAX requests complete
        $(document).ajaxStop(function() {
            $('#loader').fadeOut();
        });

        table = $('#preferredUsersTable').DataTable({
            "scrollX": true,
            "processing": true,
            "serverSide": true,
            "stateSave": true,
            "ajax": {
                "url": "{{ route('schools.list_enrolled_users') }}",
                "dataType": "JSON",
                "type": "POST",
                "data": {
                    _token: $('meta[name="csrf-token"]').attr('content')
                }
            },
            "columns": [
                {
                    "data": "user_pk_id",
                    "orderable": false,
                    "class": "text-center",
                    "render": function(data, type, row) {
                        return '<label><input type="checkbox" class="selected-user-ids" data-user-id="'+data+'" value="'+data+'" ><span></span></label>';
                    }
                },
                {
                    "data": "profile_pic",
                    "orderable": true,
                    "class": "text-center"
                },
                {
                    "data": "full_name",
                    "orderable": true,
                    "class": "text-center"
                },
                {
                    "data": "email",
                    "orderable": true,
                    "class": "text-center"
                },
                {
                    "data": "mobile",
                    "orderable": true,
                    "class": "text-center"
                },
                {
                    "data": "segment_names",
                    "orderable": false,
                    "class": "text-center",
                    "render": function(data, type, row) {
                        if (!data) return '';

                        let displayText = data.length > 20 ? data.substring(0, 20) + '...' : data;

                        return `<span class="tooltip-text" title="${data}">${displayText}</span>`;
                    }
                },
                {
                    "data": "user_id",
                    "orderable": false,
                    "class": "text-center"
                }
            ],
            "aaSorting": [],
            drawCallback: function() {
                // Check or uncheck all checkboxes when checked-all-tasks is clicked
                $('.select-all-users').click(function(){
                    $('.selected-user-ids').prop('checked', this.checked);
                });

                // Check checked-all-tasks if all checked-task-ids are checked
                $('.selected-user-ids').click(function(){
                    if($('.selected-user-ids:checked').length == $('.selected-user-ids').length){
                        $('.select-all-users').prop('checked', true);
                    }
                    else{
                        $('.select-all-users').prop('checked', false);
                    }
                });
            }
        });



        const modals = document.querySelectorAll('.modal');
        M.Modal.init(modals);

        // Bulk action functionality
        $('#apply-action').click(function() {
            const selectedUsers = [];
            $('.selected-user-ids:checked').each(function() {
                selectedUsers.push($(this).val());
            });

            const action = $('#bulk-action').val();

            if (!action) {
                alert('Please select an action.');
                return;
            }

            if (selectedUsers.length === 0) {
                alert('Please select at least one user.');
                return;
            }

            if (action === 'Send Mail') {
                $('#sendMailModal').modal('open');
            }

            if (action === 'Add to Segment') {
                $('#addSegmentModal').modal('open');
            }

            if (action === 'Remove from Segment') {
                $('#removeSegmentModal').modal('open');
            }
        });
        table.on('draw', function() {
            $('.select-all-users').prop('checked', false);
        });
    });

    // Common function to handle bulk actions
    function handleBulkAction(formId, action, extraData = {}, successCallback = null) {
        $(formId).submit(function(event) {
            event.preventDefault();

            const selectedUsers = [];
            const selectedAllUsers = $('.select-all-users').prop('checked');
            $('.selected-user-ids:checked').each(function() {
                selectedUsers.push($(this).val());
            });

            const searchText = table.search();

            // Merge extraData with required data
            const requestData = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                action: action,
                user_ids: selectedUsers,
                selected_all_users: selectedAllUsers,
                search_text: searchText,
                ...extraData
            };

            $.ajax({
                url: "{{ route('schools.students.bulk_action') }}",
                method: "POST",
                data: requestData,
                success: function(response) {
                    alert(response.message);
                    table.ajax.reload(); // Reload the DataTable
                    $('.select-all-users').prop('checked', false);
                    $(formId).closest('.modal').modal('close'); // Close the modal

                    if (successCallback) {
                        successCallback(response);
                    }
                },
                error: function(xhr) {
                    alert('An error occurred. Please try again.');
                }
            });
        });
    }

    // Initialize bulk actions
    handleBulkAction('#sendMailForm', 'Send Mail',
        { message: () => $('#mailMessage').val() }
    );
    handleBulkAction('#addToSegmentForm', 'Add to Segment',
        { selected_segment_ids: () => $('#addToSegmentSelect').val() },
        function(response) {
            populateSummaryTable('#addSegmentSummaryTableBody', response.data);
            $('#addSegmentSummaryModal').modal('open');
        }
    );
    handleBulkAction('#removeFromSegmentForm', 'Remove from Segment',
        { selected_segment_ids: () => $('#removeFromSegmentSelect').val() },
        function(response) {
            populateSummaryTable('#removeSegmentSummaryTableBody', response.data);
            $('#removeSegmentSummaryModal').modal('open');
        }
    );

    // Function to populate summary tables
    function populateSummaryTable(tableBodySelector, data) {
        let tableBody = $(tableBodySelector);
        tableBody.empty(); // Clear previous data

        if (data && data.length > 0) {
            data.forEach(item => {
                tableBody.append(`
                    <tr>
                        <td>${item.segment_name}</td>
                        <td>${item.number_of_students}</td>
                    </tr>
                `);
            });
        } else {
            tableBody.append(`
                <tr>
                    <td colspan="2" class="center-align">No data available</td>
                </tr>
            `);
        }
    }

</script>
@stop